<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style type="text/css">
			.mui-navigate-right:after {
				right: 15px;
				content: url('images/undone.png ');
			}
		</style>

	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">

				<ul id="list" class="mui-table-view mui-table-view-chevron ">
					<li class="mui-table-view-cell mui-media" v-for="item in items">
						<a href="javascript:;" @tap="open_detail(item)" class="mui-navigate-right" orderNo="{{item.orderno}}">
							<div class="mui-media-body">
								<p class='orderNo' class="mui-pull-left" style="font-size: 20px; color: #32325A;">{{item.orderno}}</p>
								<p class='address' class="mui-pull-left" style="font-size: 14px; color: #32325A;">{{item.address1}}</p>
								<p class='statu' class="mui-pull-left" style="font-size: 14px; color: #32325A;"> {{item.orderstatus}}</p>
							</div>
						</a>
					</li>

				</ul>

			</div>
		</div>

	</body>

	<script src="js/mui.min.js"></script>
	<script src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/http.js"></script>
	<script>
		//查看订单详情
		var detailPage = null;
		var open_detail = function(item) {

			//打开详情
			mui.openWindow({
				id: 'detail',
				url: 'detail.html',
				extras: {
					orderno: item.orderno,
					statu: item.orderstatus,
					orderStatu: item.statu
				}
			});

		};

		(function($, doc) {

			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						contentdown: "下拉可以刷新",
						contentover: "释放立即刷新",
						contentrefresh: "正在刷新...",
						callback: pulldownRefresh
					},
					up: {
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了',
						callback: pullupRefresh
					}
				}
			});

			var startPage = 1;
			var date = new Date();
			var toDate = dateToStr(date);
			date.setDate(1);
			var fromDate = dateToStr(date);
			var users = JSON.parse(localStorage.getItem('$user') || '{}');
			var keyWord = "";

			//刷新order列表事件
			window.addEventListener('refrshOrderList', function(event) {
				//获得事件参数
				fromDate = event.detail.fromDate;
				toDate = event.detail.toDate;
				keyWord = event.detail.keyWord;
				startPage = 1;

				console.log("fromDate---->  " + fromDate);
				console.log("toDate---->  " + toDate);
				console.log("keyWord---->  " + keyWord);
				getOrderList(fromDate, toDate, keyWord);
			});

			window.addEventListener('refrshKeyWord', function(event) {
				//获得事件参数			
				keyWord = event.detail.keyWord;

				console.log("keyWord---->  " + keyWord);

			});

			mui('.mui-content').on('tap', 'a', function(e) {
				var orderNo = this.getAttribute('orderNo');
				console.log("orderNo------> "+orderNo);
			});

			var orders = new Vue({
				el: '#list',
				data: {
					items: [] //列表信息流数据
				}
			});

			var getOrderList = function(fromDateTime, toDateTime, keyWord) {

				var postdata = {
					username: users.account.toLocaleLowerCase(),
					fromDate: fromDateTime,
					toDate: toDateTime,
					token: 'f416b7333f412805f5f1def594bdcf93',
					searchKey: keyWord,
					page: startPage
				};

				http.asyncHttp('searchMerchant.jsp', postdata, function(result) {
						if(result == "No match orders found!" || result == "Error! Please try later.") {
							orders.items = [];
							return;
						}
						orders.items = [];
						convert(JSON.parse(result)).forEach(function(item) {
							orders.items.push(item);
						});

					},
					function(err) {
						plus.nativeUI.toast("请求出错了");

					});

			};

			/**
			 * 下拉刷新
			 */
			function pulldownRefresh() {
				var date = new Date();
				var toDateTime = dateToStr(date);
				date.setDate(1);
				var fromDateTime = dateToStr(date);
				//var keyWord = "";
				startPage = 1;

				var postdata = {
					username: users.account.toLocaleLowerCase(),
					fromDate: fromDate,
					toDate: toDate,
					token: 'f416b7333f412805f5f1def594bdcf93',
					searchKey: keyWord,
					page: startPage
				};

				http.asyncHttp('searchMerchant.jsp', postdata, function(result) {
						if(result == "No match orders found!" || result == "Error! Please try later.") {
							orders.items = [];
							mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
							return;
						}
						orders.items = [];
						convert(JSON.parse(result)).forEach(function(item) {
							orders.items.push(item);
						});
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
					},
					function(err) {
						plus.nativeUI.toast("请求出错了");

					});
			};

			/**
			 * 上拉加载
			 */
			function pullupRefresh() {
				startPage = startPage + 1;
				var postdata = {
					username: users.account.toLocaleLowerCase(),
					fromDate: fromDate,
					toDate: toDate,
					token: 'f416b7333f412805f5f1def594bdcf93',
					searchKey: keyWord,
					page: startPage
				};

				http.asyncHttp('searchMerchant.jsp', postdata, function(result) {
						if(result == "No match orders found!" || result == "Error! Please try later.") {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
							return;
						}

						var respone = convert(JSON.parse(result));
						respone.forEach(function(item) {
							orders.items.push(item);
						});

						if(respone.length == 0) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
							mui('#pullrefresh').pullRefresh().disablePullupToRefres
							setTimeout(function() {
								mui('#pullrefresh').pullRefresh().enablePullupToRefresh();
							}, 1000);

						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
						}
					},
					function(err) {
						plus.nativeUI.toast("请求出错了");

					});

			};

			mui.plusReady(function() {

				console.log("URL--> " + http.URLINFO.Merchant_Url);
				getOrderList(fromDate, toDate, keyWord);
			});

			function dateToStr(d) {
				return(d.getFullYear() + "-" + ultZeroize(d.getMonth() + 1) + "-" + ultZeroize(d.getDate()));
			};

			function ultZeroize(v, l) {
				var z = "";
				l = l || 2;
				v = String(v);
				for(var i = 0; i < l - v.length; i++) {
					z += "0";
				}
				return z + v;
			};

			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {

					var statu;
					switch(item.orderstatus) {
						case "1000":
							statu = "New";
							break;
						case "2010":
							statu = "Pending for approval";
							break;
						case "2015":
							statu = "Assign to collection";
							break;
						case "2020":
							statu = "Start to collection";
							break;
						case "2030":
							statu = "Sign & Complete";
							break;
						case "2041":
							statu = "Cargo not ready";
							break;
						case "2042":
							statu = "Merchant not around";
							break;
						case "3000":
							statu = "Request to check-in";
							break;
						case "3010":
							statu = "Warehouse accept";
							break;
						case "3020":
							statu = "Auto-assign to delivery vehicle";
							break;
						case "3025":
							statu = "Approved for Auto-assign to delivery vehicle";
							break;
						case "3030":
							statu = "Driver request to check-out";
							break;
						case "3040":
							statu = "Warehouse ready to check-out";
							break;
						case "3050":
							statu = "Driver confirm to check-out";
							break;
						case "4000":
							statu = "Start to delivery";
							break;
						case "4010":
							statu = "Delivery complete";
							break;
						case "4020":
							statu = "Customer not around";
							break;
						case "4030":
							statu = "Customer reject";
							break;
						case "4040":
							statu = "Delivery without signature";
							break;
						case "1010":
							statu = "Complete";
							break;
						case "1020":
							statu = "Partial complete";
							break;
						case "1030":
							statu = "Reject";
							break;
						case "1040":
							statu = "Cancel";
							break;
					}

					newItems.push({
						orderno: item.orderno,
						orderstatus: statu,
						address1: item.address1,
						address2: item.address2,
						statu: item.orderstatus
					});
				});
				return newItems;
			};

		}(mui, document));
	</script>

</html>